<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">2</view>
                <text class="steps-text">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">3</view>
                <text class="steps-text">开户成功</text>
            </view>
        </view>
        <view class="account">
            <view>您的诚e金账号为：</view>
            <view>账户类型为：</view>
        </view>
        <view class="msg">
            温馨提示:<br/>
            请再次确认诚e金身份信息是否与房产公司摇号登记信息一致<br/>
            请在本次购房保证金款缴存截止时间前，尽快完成转入并缴存诚e金<br/>
            若您选购的房产需要摇号，请尽快携带相关资料至房产公司预约登记;参与认购摇号名单，请以房产公司公布为准
        </view>
        <button type="warn" class="sub-button" @click="next">
            缴纳诚e金
        </button>
        <button type="warn" class="sub-button" @click="goBank">
            返回我的账户
        </button>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {
            goBank(){
                uni.navigateBack({
                    delta: 5
                });
            }
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .account{
        background: white;
        font-size: 28upx;
        padding:20upx 3%;
        line-height: 50upx;
        border-top: 2px solid #E8E8E8;
        border-bottom: 2px solid #E8E8E8;
        margin: 20upx 0;
    }
    .msg{
        font-size:32upx;
        color: #7f5734;
        padding: 20upx;
        border-top: 2px solid rgba(227, 227, 227, 1);
        border-bottom: 2px solid rgba(227, 227, 227, 1);
        background: -webkit-linear-gradient(#e5d7cb, white); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#e5d7cb, white); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#e5d7cb, white); /* Firefox 3.6 - 15 */
        background: linear-gradient(#e5d7cb, white); /* 标准的语法 */
    }
</style>
